<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>dialog demo</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <style type="text/css">
	#workspaceContainer {
		width: 1000px;
	}
  
	#tools {
		float: left;
		width: 320px;
	}
	
	#workspace, #canvas {
		margin: 10px auto;
		margin-left: 200px;
	}
  
	#workspace {
		//float: right;
		width: 850px;
		height: 750px;
		background-color: yellow;
	}
	
	#extendedCanvas {
		border: 1px solid red;
		margin-top: 80px;
	}
	
	#canvas {
		border: 1px solid black;
		margin-top: 100px;
	}
	
	#result {
		background-color: green;
	}
	
	.tool {
		height: 75px;
		border: 1px solid black;
	}
	
	.toolTitle{
		margin-left: 5px;
	}
	
	.slider {
		float: left;
		width: 150px;
		margin-top: 15px;
		margin-left: 5px;
	}
	
	.sliderLabel {
		top: 0;
		float: right;
	}
	
	#imageSizeSliderValue .label {
		margin-right: 5px;
	}
	
	/*
	Also if you use float it affectivly removes that element from any surrounding div. To get around this problem try and add a div class which has 'clear' set to 'both' to your html. This make all the divs sit nicely in there container
	Like this:
	*/
	.clear { 
		clear: both;
	}
  </style>
</head>
<body>
	<div style="position: relative;">
		<!--canvas id="workspace" width="850" height="750" style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
		<canvas id="canvas" width="500" height="500" style="position: absolute; margin-left: 150px; margin-top: 50px; z-index: 1;"></canvas>
		<canvas id="imageHolder" width="500" height="500" style="position: absolute; margin-left: 10px; margin-top: 5px; z-index: 2;"></canvas-->
		<div id="workspace">
		d
			<div id="extendedCanvas">
				<div id="canvas">
					<img src="/canvas.jpg" width="200" height="200"/>
				</div>
			</div>
		</div>
		<button id="merge">Merge</button>
		<canvas id="result" width="500" height="500" style="position: absolute; margin-left: 10px; margin-top: 20px; z-index: 2;"></canvas>
	</div>
<script>

$("#merge").click(function(e){
	
var ctx;
var canvas;

var img = new Image();

img.onload = function(){

    /*canvas = document.getElementById('imageHolder');
    ctx = canvas.getContext('2d');


    ctx.beginPath();
    //ctx.arc(100, 100, 60, 0, 6.28, false); //draw the circle
	ctx.rect(10, 5, 400, 400);
    ctx.clip(); //call the clip method so the next render is clipped in last path
    ctx.stroke();
    ctx.closePath();
    ctx.drawImage(img, 0, 0);*/
	
	//
	canvas = document.getElementById('result');
    ctx = canvas.getContext('2d');
	var x = 0;
	var y = 0;
	var w = 250;
	var h = 250;
	ctx.clearRect ( x , y , w , h );
	
	/*ctx.beginPath();
	ctx.rect(50, 5, 400, 400);
    ctx.stroke();
    ctx.closePath();*/
    //ctx.drawImage(img, 0, 0);
	/*var canvasLeft = $("#canvas").position().left;
	var imageLeft = $("#imageHolder").position().left;
	var clipX = canvasLeft - imageLeft;
	ctx.drawImage(img,clipX,25,100,100,0,0,100,100);*/
	
	// draw cropped image
        var sourceX = 50;
        var sourceY = 0;
        var sourceWidth = 150;
        var sourceHeight = 150;
        var destWidth = sourceWidth;
        var destHeight = sourceHeight;
        var destX = 0;//canvas.width / 2 - destWidth / 2;
        var destY = 0;//canvas.height / 2 - destHeight / 2;
		
		var canvasOffset = $("#canvas").offset();
		var canvasLeft = canvasOffset.left;
		var canvasTop = canvasOffset.top;
        var sourceWidth = $("#canvas img").width();
        var sourceHeight = $("#canvas img").height();
		var imageOffset = $("#canvas img").offset();
		var imageLeft = imageOffset.left;
		var imageTop = imageOffset.top;
		var imageRight = imageLeft + sourceWidth;
		var imageBottom = imageTop + sourceHeight;
		
		var sourceX = canvasLeft - imageLeft;
		var destWidth = imageRight - canvasLeft;
		var sourceY = canvasTop - imageTop;
		var destHeight = imageBottom - canvasTop;
		
        ctx.drawImage(img, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);
};

img.src = "/canvas.jpg";

});


jQuery("#workspace img").resizable({
	handles: 'all'
}).parent().draggable({
	containment: $("#workspace")
});
</script>
 
</body>
</html>